<template>
  <div class="app-container">
    <el-card style="width: 100%;height:100%;float: left;margin-left: 15px;">
      <div align="center">
        <el-tag type="danger">当 前 区 块 信 息(点击区块查看详情)</el-tag>&nbsp;&nbsp;&nbsp;<br>
      </div><br>
      <el-card @click.native="showDialog(1)">
        <el-row>
          <el-col :span="24">区块编号：{{ id1 }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">智能合约：{{ contractTo1 }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">gas消耗：{{ gasUse1 }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">数据Hash：{{ DataHash1 }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">交易根：{{ transactionsRoot1 }}</el-col>
        </el-row>
      </el-card>
      <div align="center">
        <i class="el-icon-top" />
        <br>
      </div>
      <el-card @click.native="showDialog(2)">
        <el-row>
          <el-col :span="24">区块编号：{{ id2 }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">智能合约：{{ contractTo2 }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">gas消耗：{{ gasUse2 }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">数据Hash：{{ DataHash2 }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">交易根：{{ transactionsRoot2 }}</el-col>
        </el-row>
      </el-card>
      <div align="center">
        <i class="el-icon-top" />
        <br>
      </div>

      <el-card @click.native="showDialog(3)">
        <el-row>
          <el-col :span="24">区块编号：{{ id3 }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">智能合约：{{ contractTo3 }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">gas消耗：{{ gasUse3 }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">数据Hash：{{ DataHash3 }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">交易根：{{ transactionsRoot3 }}</el-col>
        </el-row>
      </el-card>

    </el-card>

    <el-card style="width: 100%;height: 100%;margin-left: 15px;float: right;">
      <div align="center">
        <font color="cornflowerblue">区块链网络信息</font>
      </div><br>
      <el-card style="width: 100%;">
        <div align="center">
          区块高度 : <font color="blueviolet" style="font-size: 30px;">{{ number }}</font>
        </div>
      </el-card>
      <!-- <el-card style="width: 100%;">
        <div align="center">
          通道 : <font color="blueviolet">tracechannel</font>
        </div>
      </el-card>
      <el-card style="width: 100%;">
        <div align="center">
          节点证书:<el-tag type="danger">4244189AB082950D788F06818441B983FCE53C72</el-tag>&nbsp;&nbsp;&nbsp;<br><br>
          共识节点1:<el-tag type="warning">2ef4e14124bf8d1aaeea7a7ff5c86afb3df8d78de1d50ffd0a0ac2bfc2ade745bdfeada7c1966da91f60aa2ddcd1e2f2bb2be2c9db906248631bf0aaa5acd20f</el-tag>&nbsp;&nbsp;&nbsp;<br><br>
          共识节点2:<el-tag type="blueviolet">7b5537bc68d67acbe37a10460a88a3b480a7b4b545355df12ea8748e07d16d4267f4a29960ab62c8adc38acc8526a8c2553073c85ef30ba534d48b66eaa7c704</el-tag>&nbsp;&nbsp;&nbsp;<br><br>
          共识节点3:<el-tag type="gray">aa3876f42d91c2ee4c6d4ffb786c09a5f647a1f6cbadf45b6e6a3496a5794d67d6b0e5606e10b28eda14061c438b7b8af46ee93f093c082716f951b43a384744</el-tag>&nbsp;&nbsp;&nbsp;<br><br>
          共识节点4:<el-tag type="success">fbb889492fff55facd685abf2e616fc71685740a1d58aac8075943cf2c3f7f48c4bc4e87b7100671ab6611b81f42bf1597f7adff1c0791fb527b82fa08af2c08</el-tag>&nbsp;&nbsp;&nbsp;<br><br>
        </div>
      </el-card>-->
    </el-card>

    <el-dialog center title="详情" :visible.sync="dialogOpen" width="80%" append-to-body>
      <json-viewer :value="blockInfo" expand-depth="5" copyable boxed />
    </el-dialog>
  </div>
</template>

<script>
import { getShow } from '@/api/show'

export default {
  data() {
    return {
      dialogOpen: false,
      PreHash1: '',
      PreHash2: '',
      PreHash3: '',
      DataHash1: '',
      DataHash2: '',
      DataHash3: '',
      number: '',
      gasUse1: '',
      gasUse2: '',
      gasUse3: '',
      version1: '',
      version2: '',
      version3: '',
      id1: '',
      id2: '',
      id3: '',
      transactionsRoot1: '',
      transactionsRoot2: '',
      transactionsRoot3: '',
      contractTo1: '',
      contractTo2: '',
      contractTo3: '',
      transactions1: '',
      transactions2: '',
      transactions3: '',
      blockInfo: '{}'
    }
  },
  created() {
    getShow(this.listQuery).then(response => {
      this.PreHash1 = response.data.PreHash1
      this.PreHash2 = response.data.PreHash2
      this.PreHash3 = response.data.PreHash3
      this.DataHash1 = response.data.dataHash1
      this.DataHash2 = response.data.dataHash2
      this.DataHash3 = response.data.dataHash3
      this.number = response.data.number
      this.gasUse1 = response.data.gasUse1
      this.gasUse2 = response.data.gasUse2
      this.gasUse3 = response.data.gasUse3
      this.version1 = response.data.version1
      this.version2 = response.data.version2
      this.version3 = response.data.version3
      this.id1 = response.data.id1
      this.id2 = response.data.id2
      this.id3 = response.data.id3
      this.transactionsRoot1 = response.data.transactionsRoot1
      this.transactionsRoot2 = response.data.transactionsRoot2
      this.transactionsRoot3 = response.data.transactionsRoot3
      this.contractTo1 = response.data.contractTo1
      this.contractTo2 = response.data.contractTo2
      this.contractTo3 = response.data.contractTo3
      this.transactions1 = response.data.transactions1
      this.transactions2 = response.data.transactions2
      this.transactions3 = response.data.transactions3
    })
  },
  methods: {
    showDialog(index) {
      this.dialogOpen = true
      if (index === 1) this.blockInfo = this.transactions1
      if (index === 2) this.blockInfo = this.transactions2
      if (index === 3) this.blockInfo = this.transactions3
    }
  }
}
</script>

<style>
</style>
